<script setup lang="tsx">
// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 模块导入 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

import dayjs from 'dayjs';
import { useAppStore } from '@/store/modules/app';
import { useTable } from '@/hooks/common/table';
import { $t } from '@/locales';
import { fetchGetCjFeedbackPage } from '@/service/api';

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 组件名称 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

defineOptions({
  name: 'CjFeedbackPage'
});

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 类型常量 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 组合式函数 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

const appStore = useAppStore();

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 父子传参 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架模型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

const { columns, columnChecks, data, loading, getData, getDataByPage, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchGetCjFeedbackPage,
  showTotal: true,
  apiParams: {
    page: 1,
    pageSize: 20
  },
  columns: () => [
    {
      key: 'index',
      title: $t('common.index'),
      width: 64,
      align: 'center'
    },
    {
      key: 'createUser',
      title: $t('page.sampling.feedback.createUser'),
      align: 'center',
      width: 150
    },
    {
      key: 'createTime',
      title: $t('page.sampling.feedback.createTime'),
      align: 'center',
      width: 160,
      render: row => dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      key: 'questionType',
      title: '问题类型',
      align: 'center',
      width: 150,
      render: row => {
        if (row.questionType === '1') return '功能异常';
        else if (row.questionType === '2') return '体验问题';
        else if (row.questionType === '3') return '内容建议';
        else if (row.questionType === '4') return '其他反馈';
        return '';
      }
    },
    {
      key: 'question',
      title: $t('page.sampling.feedback.question'),
      align: 'left',
      minWidth: 100,
      titleAlign: 'center'
    }
  ]
});

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务模型 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架方法 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务方法 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

function requestTypeText(type) {
  type === '1' ? '功能异常' : type === '2' ? '体验问题' : rtype === '3' ? '内容建议' : row.questionType === '4' ? '其他反馈' : '';
}

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 框架生命周期 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++

// +++++++++++++++++++++++++++++++++++++++++++++++
// ---------- 业务生命周期 ----------
// +++++++++++++++++++++++++++++++++++++++++++++++
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto">
    <FeedbackSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
    <NCard :bordered="false" class="sm:flex-1-hidden card-wrapper" content-class="flex-col">
      <TableHeaderOperation
        v-model:columns="columnChecks"
        :loading="loading"
        add-auth="cj:feedback:add"
        delete-auth="cj:feedback:delete"
        @refresh="getData"
      />
      <NDataTable
        remote
        striped
        size="small"
        class="sm:h-full"
        :data="data"
        :scroll-x="962"
        :columns="columns"
        :flex-height="!appStore.isMobile"
        :loading="loading"
        :single-line="false"
        :row-key="row => row.id"
        :pagination="mobilePagination"
      />
    </NCard>
  </div>
</template>
